<template>
	<view>
		<image :src="tempImage" style="width: 100%; height: 415px;"></image>
		<!-- <view v-if="isDraw"> -->
		<drawImage :isDraw="isDraw" :canvasData="canvasData" :imageSize="{width: 375, height: 415}"
			@generateImageSuccessful="generateImageSuccessful" />
		<!-- </view> -->

		<!-- <view class="wrap">
			<view class="line1">
				微信扫码连WiFi
			</view>
			<view class="line2">
				一键快速连接·无需密码·安全防蹭网
			</view>
			<view class="image">
<image :src="wifiData.qrcode_file" mode="aspectFit" style="width:70%;"></image>
			</view>
			<view class="line3">
				<view>
					{{wifiData.provider_name}}
				</view>
				<view class="line3_1">
					无需密码，扫码就能连！
				</view>
			</view>
			
		</view> -->
		<view class="bottom-tool">
			<view class="tool">
				<view class="icon-wrap">
					<uni-icons custom-prefix="iconfont" type="icon-print" size="32" color="#ffffff"
						@click="openPrintModal"></uni-icons>
				</view>
				<text class="text">
					打印
				</text>
			</view>

			<view class="tool">
				<view @click="saveQrcode" class="icon-wrap">
					<uni-icons custom-prefix="iconfont" type="icon-baocuntupian" size="32" color="#ffffff"></uni-icons>

				</view>
				<text class="text">小程序码</text>
			</view>
			<view class="tool">
				<view @click="saveImage" class="icon-wrap">
					<uni-icons custom-prefix="iconfont" type="icon-baocuntupian" size="32" color="#ffffff"></uni-icons>

				</view>
				<text class="text">推广海报</text>
			</view>
		</view>
		<print-modal ref="modalPrint" :tempImage="wifiData.qrcode_file"></print-modal>
	</view>
</template>

<script>
	const db = uniCloud.database();
	const wifiTable = db.collection('wifi')
	import {
		ref
	} from "vue"
	// import printModal from "@/components/printModal/printModal.vue"
	export default {
		data() {
			return {
				wifiData: {
					qrcode_file: "",
					wifi_name: "",
					provider_name: "",
					_id: "",
					password: ""
				},
				// 是否开始绘制
				isDraw: false,
				/**
				 * 需要绘制的图片数据 - 具体参数需要看组件内的
				 * { type: 'rect',  attr: { color: '', x, y, width, height, radian_1, radian_2, radian_3, radian_4 } }
				 * { type: 'image', attr: { image: '', x, y, width, height, radian_1, radian_2, radian_3, radian_4 } }
				 * { type: 'text',  attr: { text: '', x, y, color, size, weight, writingMode } }
				 * */
				canvasData: [],
				// 临时路径
				tempImage: null,
			}
		},
		setup() {
			const modalPrint = ref(null)
			const openPrintModal = () => {
				// console.log("点击打印")
				modalPrint.value.openPop('center')
			}
			return {
				modalPrint,
				openPrintModal
			}
		},
		// components:{
		// 	printModal
		// },
		onReady() {
			uni.showLoading({
				title: '加载中'
			});
		},
		async onLoad(option) {
			// console.log("1.开始生成二维码图片")

			const {
				screenWidth
			} = uni.getSystemInfoSync();
			// console.log("screenWidth", screenWidth)
			const wifiId = option._id
			const res = await wifiTable.where({
				_id: wifiId
			}).get({
				getOne: true
			})
			const result = res.result.data
			// console.log("根据wifi_id获取wifi数据成功", result)
			const {
				wifi_name,
				provider_name,
				password,
				qrcode_file,
				_id
			} = result
			this.wifiData.wifi_name = wifi_name
			this.wifiData.provider_name = provider_name
			this.wifiData.password = password
			this.wifiData._id = _id
			this.wifiData.qrcode_file = qrcode_file
			// console.log("qrcode_file", qrcode_file)
			this.canvasData = [{
					type: 'rect',
					attr: {
						color: 'white',
						x: 24,
						y: 24,
						width: screenWidth - 48,
						height: 358
					}
				},
				{
					type: 'text',
					attr: {
						text: '微信扫码连WiFi',
						x: (screenWidth - 140) / 2,
						y: 56,
						color: '#333333',
						size: 20,
						weight: '500',
						writingMode: 'initial'
					}
				},
				{
					type: 'text',
					attr: {
						text: '一键快速连接·无需密码·安全防蹭网',
						x: (screenWidth - 202) / 2,
						y: 80,
						color: '#666666',
						size: 14,
						weight: '300',
						writingMode: 'initial'
					}
				},
				{
					type: 'image',
					attr: {
						image: qrcode_file,
						x: (screenWidth - 200) / 2,
						y: 100,
						width: 200,
						height: 200,
						writingMode: 'initial'
					}
				},
				{
					type: 'rect',
					attr: {
						color: '#007aff',
						x: 24,
						y: 312,
						width: screenWidth - 48,
						height: 70
					}
				},
				{
					type: 'text',
					attr: {
						text: provider_name,
						x: (screenWidth - provider_name.length * 14) / 2,
						y: 338,
						color: '#ffffff',
						size: 20,
						writingMode: 'initial'
					}
				},
				{
					type: 'text',
					attr: {
						text: "无需密码，扫码就能连！",
						x: (screenWidth - 140) / 2,
						y: 360,
						color: '#ffffff',
						size: 14,
						writingMode: 'initial'
					}
				},
			];
			this.isDraw = true;
		},
		methods: {
			/** 绘制成功后的回调 - 返回一个临时路径 */
			generateImageSuccessful(image) {
				// console.log("image", image)
				uni.hideLoading();
				this.tempImage = image;
			},
			saveQrcode() {
				const that = this
				uni.authorize({
					scope: 'scope.writePhotosAlbum',
					success: () => {
						// console.log("用户已授权")
						// 已授权
						uni.downloadFile({
							url: this.wifiData.qrcode_file,
							success: (res) => {
								// console.log("res---downloadFile", res)
								uni.hideLoading();
								if (res.statusCode === 200) {
									that.downLoadImg(res.tempFilePath);
								}
							},
							fail: (err) => {
								// console.log("保存失败？", err)
								uni.showToast({
									title: "失败啦",
									icon: "none"
								});
							}
						})

					},
					fail: () => {
						uni.showToast({
							title: "用户取消授权",
							icon: "none"
						});
					}
				})
			},
			saveImage() {
				const that = this
				uni.authorize({
					scope: 'scope.writePhotosAlbum',
					success: () => {
						// console.log("用户已授权")
						// 已授权
						that.downLoadImg(this.tempImage);
					},
					fail: () => {
						uni.showToast({
							title: "用户取消授权",
							icon: "none"
						});
					}
				})
			},
			async downLoadImg(image) {
				// console.log("下载图片")
				if (!image) {
					uni.showToast({
						title: "未找到图片",
						icon: "none"
					});
					return
				}
				uni.showLoading({
					title: '加载中'
				});
				uni.saveImageToPhotosAlbum({
					filePath: image,
					success: function() {
						uni.showToast({
							title: "保存成功",
							icon: "none"
						});
					},
					fail: function() {
						uni.showToast({
							title: "保存失败，请稍后重试",
							icon: "none"
						});
					}
				});
				// uni.downloadFile({
				// 	url: this.tempImage,
				// 	success: (res) => {
				// 		console.log("res---downloadFile", res)
				// 		uni.hideLoading();
				// 		if (res.statusCode === 200) {

				// 		}
				// 	},
				// 	fail: (err) => {
				// 		console.log("保存失败？", err)
				// 		uni.showToast({
				// 			title: "失败啦",
				// 			icon: "none"
				// 		});
				// 	}
				// })
			}
			// openPrintModal () {
			// // 		console.log("点击打印")
			// 		this.$refs.modalPrint.openPop('center')
			// }

		}
	}
	// import {
	// 	ref,
	// 	reactive,
	// 	computed
	// } from 'vue';
	// import {
	// 	onLoad
	// } from '@dcloudio/uni-app';
	// const db = uniCloud.database();
	// const wifiTable = db.collection('wifi')
	// export default {
	// 	setup() {
	// 		let wifiData = reactive({
	// 			qrcode_file: "",
	// 			wifi_name: "",
	// 			provider_name: "",
	// 			_id: "",
	// 			password: ""
	// 		})
	// 		onLoad(async (option) => {

	// 			const wifiId = option._id
	// 			const res = await wifiTable.where({
	// 				_id: wifiId
	// 			}).get({
	// 				getOne: true
	// 			})
	// 			const result = res.result.data
	// 			const {
	// 				wifi_name,
	// 				provider_name,
	// 				password,
	// 				qrcode_file,
	// 				_id
	// 			} = result
	// 			wifiData.wifi_name = wifi_name
	// 			wifiData.provider_name = provider_name
	// 			wifiData.password = password
	// 			wifiData._id = _id
	// 			wifiData.qrcode_file = qrcode_file

	// 		})
	// 		const saveImage = ()=>{
	// 			// 先将html转为canvas,然后再保存

	// 		}
	// 		return {
	// 			wifiData,
	// 			saveImage,
	// 			drawImage
	// 		}
	// 	}
	// }
</script>

<style lang="scss">
	.wrap {
		margin: 32rpx 48rpx;
		text-align: center;
		background-color: #ffffff;
		padding-top: 24rpx;
		border-radius: 10px;

	}

	.line1 {
		font-size: 48rpx;
		text-align: center
	}

	.line2 {
		font-size: 28rpx;
		color: #999999;
		text-align: center;
		margin-top: 20rpx;
	}

	.image {
		margin-top: 48rpx;
	}

	.line3 {
		background-color: $uni-color-primary;
		padding: 24rpx 0;
		color: #ffffff;
	}

	.line3_1 {
		margin-top: 10px;
	}

	.icon-wrap {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background-color: $uni-color-primary;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bottom-tool {
		flex-direction: row;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tool {
		width: 50%;
		flex-direction: column;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.text {
		margin-top: 10px;
		color: #666666;
	}
</style>
